import React, { Component } from 'react';
import { withRouter, NavLink } from 'react-router-dom';
import { store } from "../../store";
import TagCss from "./Tag.module.css";

const Tag = class index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tagList: []
        }
        let menuList = [];

        // 监听路由变化
        props.history.listen(route => {
            console.log(route)
            store.dispatch({ type: 'tagAdd', route, menuList })
        })

        store.subscribe(() => {
            menuList = store.getState().menuReducer;
            this.setState({ tagList: store.getState().tagReducer })
        })
    }
    render() {
        return (
            <div className={TagCss.tagWrap}>
                {this.state.tagList.map((tag, index) => (
                    <NavLink activeClassName={TagCss.active} className={TagCss.tag} to={tag.pathname} key={index}><span>{tag.title}</span></NavLink>
                ))}
            </div>
        )
    }
}

export default withRouter(Tag);